<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        <style>
            .active{
                color: salmon;
            }
            .color{
                color: aqua;
            }
            .color2{
                color: rgb(253, 152, 29);
                
            }
            .color3{
                color: rgb(69, 246, 160);
            }
            .bg1{
                background: rgb(93, 179, 249);
            }
            .bg2{
                background: darkorchid;
            }
            .bg3{
                background: violet;
            }
            .fs{
                font-size: 20px;
            }
            .fs2{
                font-size: 14px;
            }
            .fs3{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 静态样式 -->
            <p class = "color" style = "font-size:20px">世界水獭日</p>

            <!-- 动态样式 -->
            <!-- 1 动态class值是字符串形式，值是什么，类名就是什么 -->
            <p v-bind:class="'color3'" >世界水獭日</p>
            <p v-bind:class="color4" >世界水獭日</p> 
            <button @click="changeStyle1" >按钮</button>
            
            <!-- 2 动态class值是对象形式 属性值为true 就保留类名 否则不用-->
            <p :class="{color : false,  bg1 : true,  fs : true}">世界水獭日</p>
            <p :class="{ bg2 : color4 === 'color3',   fs2 : color4 === 'color2'}">世界水獭日</p>
            <button @click="changeStyle1" >按钮</button>
            <br>
            <br>
            <!-- 3 动态class的值是数组形式，数组内部值都会保留为类名 -->
            <p :class="[ 'bg3' , 'fs3' ]">世界水獭日</p>

            <!-- 动态style -->
            <p :style="{opacity,backgroundColor:'#f1b937',fontSize:'20px',color:'#3849a1'}">由国际水獭生存基金（IOSF）创立</p>
            <p>opacity: <input type="text" v-model="opacity" placeholder="输入0-1的值"></p>

            <ul>
                <li
                    :class="{ active:isDate }"
                    @click="setActive('Date')"
                >每个5月最后一个星期三是世界水獭日</li>
                <li
                    :class="{ active:isAttribute }"
                    @click="setActive('Attribute')"
                >河流生态系统的旗舰物种</li>
                <li
                    :class="{ active:isStyle }"
                    @click="setActive(Style)"
                >7属13个物种</li>
            </ul>
            
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    color4:" color2 ",
                    isDate:false,
                    isAttribute:false,
                    isStyle:false,
                    opacity:1,
                },
                methods:{
                    changeStyle1(){
                        this.color4 = this.color4 === "color2" ? "color3" : "color2" ;
                    },
                    setActive(tag){
                        this.isDate = false;
                        this.isAttribute = false;
                        this.isStyle = false;

                        this[`is${tag}`] = true;
                    }
                }
            });
            vm.$mount("#app");
        </script>
    </body>
</html>